<template>
  <div class="box">
    <!-- 房屋详情 -->
    <van-nav-bar left-arrow @click-left="$router.go(-1)">
      {{ active.community }}
    </van-nav-bar>

    <!-- 图片 -->
    <div class="picture">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img src="http://liufusong.top:8080/img/swiper/1.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="http://liufusong.top:8080/img/swiper/2.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="http://liufusong.top:8080/img/swiper/3.png" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>

    <div class="details">
      <h3>{{ active.title }}</h3>
      <van-tag color="#e1f5f8" text-color="#39becd">{{ active.tags }}</van-tag>

      <div class="attribute">
        <van-row type="flex" justify="center">
          <van-col span="8" type="flex" justify="center">
            <div class="data">{{ active.price }}<span>/月</span></div>
            <div>租金</div>
          </van-col>
          <van-col span="8">
            <div class="data">{{ active.roomType }}</div>
            <div>房型</div>
          </van-col>
          <van-col span="8">
            <div class="data">{{ active.size }}<span>平米</span></div>
            <div>面积</div>
          </van-col>
        </van-row>
      </div>

      <div class="type">
        <van-row>
          <van-col span="12">
            <div><span>装修：</span>{{ active.description }}</div>
            <div><span>楼层：</span>{{ active.floor }}</div>
          </van-col>
          <van-col span="12">
            <div><span>朝向：</span>{{ active.oriented }}</div>
            <div><span>类型：</span>{{ active.floor }}</div>
          </van-col>
        </van-row>
      </div>
    </div>

    <div class="address">
      <div class="residentialQuarters">小区：<span>天山星城</span></div>
      <div class="map">
        <baidu-map
          class="bm-view"
          :center="center"
          :zoom="zoom"
          @ready="handler"
        >
        </baidu-map>
      </div>
    </div>

    <!-- 房屋配套 -->
    <div class="housingSupportingFacilities">
      <h4>房屋配套</h4>
      <div>暂无数据</div>
    </div>

    <!-- 房源概况 -->
    <div class="housingOverview">
      <h4>房源概况</h4>
      <div class="Homeowner">
        <van-image
          round
          width="50"
          height="50"
          lazy-load
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="useInfo">
          <div>王女士</div>
          <i>已认证房主</i>
        </div>
        <van-tag type="primary" size="medium" color="#1cb676" plain
          >标签</van-tag
        >
      </div>
      <div class="txt">
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="like">
      <h4>猜你喜欢</h4>

      <div class="HouseDetail">
        <div class="HouseItem">
          <div class="HouseItem_img">
            <img src="http://liufusong.top:8080/img/message/1.png" alt="" />
          </div>
          <div class="HouseItem_content">
            <p class="HouseItem_p">安贞西里 3室1厅</p>
            <div class="HouseItem_desc">72.32㎡/南 北/低楼层</div>
            <van-tag type="primary" color="#e1f5f8" text-color="#39becd"
              >随时看房
            </van-tag>
            <div class="HouseItem_price"><span>4500</span> 元/月</div>
          </div>
        </div>
      </div>
      <div class="HouseDetail">
        <div class="HouseItem">
          <div class="HouseItem_img">
            <img src="http://liufusong.top:8080/img/message/2.png" alt="" />
          </div>
          <div class="HouseItem_content">
            <p class="HouseItem_p">天居园 2室1厅</p>
            <div class="HouseItem_desc">83㎡/南/高楼层</div>
            <van-tag type="primary" color="#e1f5f8" text-color="#39becd"
              >近地铁
            </van-tag>
            <div class="HouseItem_price"><span>7200</span> 元/月</div>
          </div>
        </div>
      </div>
      <div class="HouseDetail">
        <div class="HouseItem">
          <div class="HouseItem_img">
            <img src="http://liufusong.top:8080/img/message/3.png" alt="" />
          </div>
          <div class="HouseItem_content">
            <p class="HouseItem_p">角门甲4号院 1室1厅</p>
            <div class="HouseItem_desc">52㎡/西南/低楼层</div>
            <van-tag type="primary" color="#e1f5f8" text-color="#39becd"
              >集中供暖
            </van-tag>
            <div class="HouseItem_price"><span>4300</span> 元/月</div>
          </div>
        </div>
      </div>
    </div>

    <van-tabbar route direction="horizontal">
      <van-tabbar-item replace to="">
        <van-icon
          @click="toggleCollect"
          :class="{ article: res.isFavorite }"
          name="star-o"
        />
        收藏
      </van-tabbar-item>
      <van-tabbar-item replace to="">在线咨询</van-tabbar-item>
      <van-tabbar-item replace to="/home" class="telephonebooking">
        电话预约
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  getArticleDetail,
  updateCollectNot,
  updateCollect,
  updateCollectDelete
} from '@/api/lookfor'
export default {
  name: 'HouseDetails',
  props: {},
  components: {},
  data () {
    return {
      active: {},
      center: { lng: 0, lat: 0 },
      zoom: 3,
      res: {}
    }
  },
  async created () {
    const id = this.$route.params.houseCode

    const { body } = await getArticleDetail(id)
    console.log(body)
    this.active = body
  },
  computed: {},
  watch: {},
  methods: {
    handler ({ BMap, map }) {
      //   console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    // 收藏与否
    async toggleCollect () {
      const id = this.$route.params.houseCode
      const { body } = await updateCollectNot(id)
      this.res = body
      this.res.isFavorite = !this.res.isFavorite
      console.log(this.res)
      if (this.res.isFavorite === true) {
        await updateCollect(id)
        this.$toast.success('收藏成功')
      } else {
        await updateCollectDelete(id)
        this.$toast.fail('取消收藏')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1cb676;
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
::v-deep .van-nav-bar__title {
  color: #fff;
}
.box {
  background-color: #f6f5f6;
  .picture {
    width: 375px;
    height: 252px;
    .van-swipe {
      width: 100%;
      height: 100%;
    }
  }
  .details {
    height: 237px;
    background-color: #fff;
    padding: 15px;
    h3 {
      font-weight: 400;
      font-size: 16px;
      color: #333;
    }
    .attribute {
      height: 60px;
      width: 100%;
      border-top: 1px solid #cecece;
      border-bottom: 1px solid #cecece;
      margin: 15px 0;
      padding: 15px 0;
      .van-row {
        height: 60px;
        ::v-deep .van-col {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .data {
            color: #fa5741;
            font-size: 18px;
            font-weight: bolder;
          }
        }
      }
    }
    .type {
      font-size: 13px;
      span {
        color: #999;
      }
    }
  }
  .address {
    margin-top: 10px;
    background: #fff;
    .residentialQuarters {
      margin: 0 3%;
      line-height: 44px;
      color: #666;
      font-size: 14px;
      span {
        color: #333;
      }
    }
    .map {
      width: 100%;
      height: 145px;
      .bm-view {
        width: 100%;
        height: 145px;
      }
    }
  }
  .housingSupportingFacilities {
    margin-bottom: 10px;
    padding: 0 10px;
    background: #fff;
  }
  .housingOverview {
    margin-bottom: 10px;
    padding: 0 10px;
    background: #fff;

    .Homeowner {
      margin-bottom: 10px;
      display: flex;
      .useInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 40px;
        width: 82px;
        padding: 15px 0 0 5px;
      }

      ::v-deep .van-tag {
        position: absolute;
        right: 15px;
        border-radius: 3px;
        padding: 3px 15px;
        font-size: 14px;
      }
    }
  }
  .like {
    margin-bottom: 60px;
    padding: 0 10px;
    background: #fff;
  }
  .HouseItem {
    height: 120px;
    position: relative;
    box-sizing: border-box;
    justify-content: space-around;
    padding-top: 18px;
    border-bottom: 1px solid #e5e5e5;
    .HouseItem_img {
      float: left;
      width: 106px;
      height: 80px;
      img {
        width: 106px;
        height: 80px;
      }
    }
    .HouseItem_content {
      overflow: hidden;
      line-height: 22px;
      padding-left: 12px;
      .HouseItem_p {
        margin: 0 auto;
        font-size: 15px;
        color: #394043;
      }
      .HouseItem_desc {
        font-size: 12px;
        color: #afb2b3;
      }
      .HouseItem_price {
        font-size: 12px;
        color: #fa5741;
        span {
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
}
h4 {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #cecece;
}
::v-deep .van-tabbar-item {
  font-size: 17px;
  color: #999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-top: 1px solid #cecece;
  border-right: 1px solid #cecece;

  &.article {
    background: #f83007;
    color: #fff;
  }
}
::v-deep .telephonebooking {
  background-color: #1cb676;
  color: #fff;
}
</style>
